<template>
  <div class="pdf-manage">
    <h2>pdf管理</h2>
    <SearchForm
      ref="searchForm"
      v-model:normalFormData="searchData"
      :form-items="formItems"
      @search="queryList"
      @add-item="addHandle"
    />
    <NormalTable
      ref="normalTable"
      :columns="columns"
      :data="tableData"
      :total="total"
      @pager-change="queryList"
    />

    <SubmitDialog
      ref="dialog$1"
      :title="opType"
      @submit="submitHandle"
    >
      <NormalForm
        ref="editForm"
        v-model="editData"
        :form-items="addFormItems"
        label-width="80px"
      />
    </SubmitDialog>
    <NormalDialog
      ref="dialog$2"
      style=" min-width: 280px;min-height: 280px;"
    >
      <vueQr
        :text="qrcodeVal"
        :size="280"
        logo-src="./logo.svg"
        @click="qrClick"
      />
    </NormalDialog>
  </div>
</template>

<script setup lang="jsx">
import { computed, ref} from 'vue'
import FileUpload from '@c/FormItems/FileUpload.vue'
import NormalTable from '@c/Table/NormalTable.vue'
import NormalForm from '@c/Form/NormalForm.vue'
import SearchForm from '@c/Form/SearchForm.vue'
import http from '@u/request.js'
import { ElInput,ElButton ,ElPopconfirm,ElDatePicker, ElSelect} from 'element-plus'
import SubmitDialog from '@c/Dialog/SubmitDialog.vue'
import  URLS from '@api/api'
import {resultHandle} from '@/common/common'
import NormalDialog from '@c/Dialog/NormalDialog.vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import ImageUpload from '@c/FormItems/ImageUpload.vue'
import NormalSelect from '@c/Select/NormalSelect.vue'
import {generateMap} from '@/common/common.js'

const SOURCE_TYPE_ENMUS =[
    {
        label:'图片',
        value:'1',
        en:'img'
    },
    {
        label:'pdf',
        value:'2',
        en:'pdf'
    },
]





const dialog$1 =ref(null)
const dialog$2 =ref(null)
const editForm = ref(null)
const searchForm = ref(null)
const normalTable = ref(null)

const total = ref(0)
const tableData = ref([])
const qrcodeVal=ref('')
const opType = ref('')


const editData = ref({
    sourceType:'1'
})
const searchData = ref({
    docName:null,
    note:null,
    createTimeRange:null,
})


const addHandle =()=>{
    editData.value={
        sourceType:'1'
    }
    dialog$1.value.visible=true
    opType.value='新增'
}
    


const queryList = ()=>{
    http.post(URLS.PDF_QUERY,{...normalTable.value?.pageInfo,...searchData.value}).then(res=>{
        resultHandle(res,()=>{
            const {data,total:total$1}=res.data
            tableData.value=data
            total.value=total$1
        })
    })
}

const deleteHandle=(id)=>{
    http.post(URLS.PDF_DELETE,{id}).then(res=>{
        resultHandle(res,()=>{
            queryList()
        },true)
    })
}


const editHandle =({docId,docName,id,groupId,note,sourceType})=>{
    opType.value='编辑'
    const docName$1 =docName.split(';')
    const groupId$1 =groupId.split(';')
    const docId$1 =docId.split(';')
    const docInfo=docName$1.map((name,index)=>({name,docId:docId$1[index],groupId:groupId$1[index],url:`${location.origin}/${groupId$1[index]}/${docId$1[index]}`}))
    editData.value={id,note,docInfo,sourceType}
    dialog$1.value.visible=true

}

const submitHandle = () => {
    let url =URLS.PDF_ADD
  
    editForm.value.form.validate(valid=>{
        if(opType.value==='编辑'){
            url = URLS.PDF_UPDATE
        }
        if(valid){
            const {docInfo,...params}=editData.value
            const {docId,docName,groupId} = docInfo.reduce((info,current,index)=>{
                if(!index){
                    info={...current,docName:current.name}
                }else{
                    info.docId =info.docId+';'+current.docId
                    info.docName  =info.docName+ ';'+current.name
                    info.groupId  =info.groupId+ ';'+current.groupId
                }
                return info
            },{})
            http.post(url,{...params,docName,docId,groupId}).then(res=>{
                resultHandle(res,()=>{
                    dialog$1.value.visible=false
                    normalTable.value.pageInfo.currentPage=1
                    queryList()
                },true)
            })
        }
    })
}

const getUrl = (uuId,sourceType)=>{
    const map = generateMap(SOURCE_TYPE_ENMUS,'value','en')
    return `${location.origin}/preview-${map[sourceType]}?uuId=${uuId}`
}

const showQR = ({uuId,sourceType})=>{
    qrcodeVal.value=getUrl(uuId,sourceType)
    dialog$2.value.visible=true
}

const qrClick = (e)=>{
    const src = e.target.src
    const a = document.createElement('a')
    a.download=''
    a.href=src
    a.click()
    a.remove()
}

queryList()



const columns=[
    {        
        label:'序号',
        type:'index',
        width:60
    },
    {
        label:'文件名',
        prop:'docName',
        width:200
    },
    {
        label:'文件类型',
        prop:'sourceType',
        width:200,
        formatter:(row)=>{
            const map = generateMap(SOURCE_TYPE_ENMUS,'value','label')
            return map[ row.sourceType]
        }
    },
    {
        label:'预览地址',
        s_default:({uuId,sourceType})=>{
            const url = getUrl(uuId,sourceType)
            return <a href={url}>{url}</a>
        },
        width:400
    },
    {
        label:'备注',
        prop:'note',
        width:280
    },
    {
        label:'创建时间',
        prop:'createTime',
        width:200
    },
    {
        label:'创建人',
        prop:'createBy',
        width:160
    },
    {
        label:'更新时间',
        prop:'updateTime',
        width:200
    },
    {
        label:'更新人',
        prop:'updateBy',
        width:160
    },
    {
        label:'操作',
        width:200,
        fixed:'right',
        s_default:(row)=>{
            return <div class={{operators:true}}>
                <ElButton link type='primary' onClick={()=>showQR(row)}>生成二维码</ElButton>
                <ElButton link type='primary' onClick={()=>editHandle(row)}>编辑</ElButton>
                <ElPopconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    title="确定要删除该条数据吗?"
                    width="200px"
                    onConfirm={()=>deleteHandle(row.id)}
                >{{
                        reference:()=><ElButton link type='primary'>删除</ElButton>
                    }}</ElPopconfirm>
            </div>
        }

    }
]

const formItems = ref([
    {
        label:'文件名',
        prop:'docName',
        com:<ElInput/>
    },
    {
        label:'备注',
        prop:'note',
        com:<ElInput/>
    },
    {
        label:'创建时间',
        prop:'createTimeRange',
        com: <ElDatePicker
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"

        />,
        events:{
            change:(range,form)=>{
                const [startTime,endTime]=range[0]
                Object.assign(form,{startTime,endTime})

            }
        }
    }
])



const options =[
    { 
        label:'类型', 
        prop:'sourceType', 
        com:<NormalSelect/>,
        attrs:{
            options:[{label:'图片',value:'1'},{label:'PDF',value:'2'}]
        },
        events:{
            change:()=>{editData.value.docInfo=[]}
        }
    },
    {   
        label:'图片', 
        prop:'docInfo',
        com:<ImageUpload/>,
        itemAttrs:{
            rules:[
                {required:true,trigger:'change',message:'必填'},
            ],
        },
        events:{
            change:()=>{editData.value.docInfo=[]}
        }

    },
    {  
        label:'文件', 
        prop:'docInfo',
        com:<FileUpload/>,
        itemAttrs:{
            rules:[
                {required:true,trigger:'change',message:'必填'},
            ]
        },
    },
    {
        label:'备注',
        prop:'note',
        com:<ElInput/>,
        attrs:{
            type:"textarea",
            rows:4,
        }
    }
]
const addFormItems =computed(()=>{
    const {sourceType} = editData.value
    const docInfoMap = {
        "1":options[1],
        '2':options[2]
    }
    const docInfoItem = docInfoMap[sourceType]
    return [options[0],docInfoItem,...options.slice(3)]
})


</script>

<style lang="scss" scoped>
.pdf-manage{
  padding: 0 24px 36px;
}

</style>


  
